<template>
    <div>
        <el-form :inline="true" ref="form" :model="form" label-width="66px" class="demo-form-inline">
            <el-form-item label="搜索班级:" prop="class_name">
                <el-input size="mini" placeholder="请输入班级名称" v-model="form.class_name"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="search" size="mini">筛选</el-button>
            </el-form-item>
        </el-form>
        <el-row>
            <div class="content" v-if="hasPermission('kanke:textbook:classcourse:detail')">
                <div class="content__item" v-for="(item, index) in tableData" :key="index" @click="handleClick(item)">
                    <img :src="item.cover_url" alt="">
                    <span class="title">{{ item.class_name }}</span>

                </div>
            </div>
            <div class="content" v-else>
                <div class="content__item" v-for="(item, index) in tableData" :key="index">
                    <img :src="item.cover_url" alt="">
                    <span class="title">{{ item.class_name }}</span>

                </div>
            </div>
            <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                :current-page="pageInfo.pageNumber" :page-sizes="pageSizes" :page-size="pageInfo.pageSize" background
                layout="total, sizes, prev, pager, next, jumper" :total="pageInfo.total">
            </el-pagination>
        </el-row>
    </div>
</template>
<script>
import { hasPermission, isShow } from '@/common/permission';
import { list } from "@/api/kanke/gradeclass/gradeclass";
import { getClassTopFolder } from "@/api/kanke/textbook/classcourse"
import { pageSizes } from '@/constant/index';
import { getPageSize } from '@/utils';


export default {
    name: "KanKeTextbookClassListTabPane",
    props: {
        type: {
            type: String,
            default: 'all'
        }
    },
    data() {
        return {
            loading: false,
            form: {
                class_name: ''
            },
            pageInfo: {
                pageSize: 10,
                pageNumber: 1,
                total: 0
            },
            tableData: [],
            pageSizes
        }
    },
    created() {
        this.pageInfo.pageSize = getPageSize() || 12
        this.init();
    },
    methods: {
        hasPermission,
        isShow,
        init() {
            this.loading = true;
            const params = {
                ...this.form,
                ...this.pageInfo
            };
            if (this.type == 'my') {
                params.userType = 1;
            }
            list(params).then((res) => {
                console.log(res);
                this.tableData = res.data.list;
                this.pageInfo.total = res.data.total;
                this.loading = false;
            })
        },
        search() {
            this.init()
        },
        handleSizeChange: function (e) {
            this.pageInfo.pageSize = e;
            this.init();
        },
        handleCurrentChange: function (e) {
            console.log(e);
            this.pageInfo.pageNumber = e;
            this.init();
        },
        handleClick(item) {
            // 获取班级下的 顶级文件夹id
            getClassTopFolder({ class_id: item.id }).then(res => {
                console.log(res)
                if (res.code == 200) {
                    this.$router.push({
                        name: 'ClassCourse',
                        query: {
                            class_id: item.id,
                            folder_id: res.data
                        }
                    })
                }
            })
        }

    }

}
</script>
<style lang="scss" scoped>
@import "@/styles/abstract/mixins.scss";

.content {
    display: flex;
    flex-wrap: wrap;
    align-content: flex-start;
    justify-content: flex-start;
    margin-bottom: 15px;
    min-height: 900px;

    &__item {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        margin: 20px;

        img {
            border: 1px solid #ccc;
            width: 150px;
            height: 150px;
            border-radius: 10px;
        }

        .title {
            width: 140px;
            max-height: 48px;
            line-height: 16px;
            margin: 10px 0;
            word-break: break-word;
            white-space: normal;
            @include line-clamp(3);
        }
    }
}
</style>